<template>
  <div class="myhead">
    <h2>My ToDo List</h2>
    <div class="box">
      <input
        type="text"
        placeholder="请输入待办事项..."
        class="thing"
        v-model="newTodo"
      />
      <button class="add" @click="addTodo">添加</button>
    </div>
  </div>

  <ul>
    <li
      v-for="(todo, index) in todos"
      :key="index"
      :class="{ check: todo.done }"
    >
      <input
        type="checkbox"
        @click="todo.done = !todo.done"
        v-model="todo.done"
      />
      {{ todo.text }}
      <span class="close" @click="todos.splice(index, 1)">删除</span>
    </li>
    <li v-if="!todos.length" class="empty">暂无待办事项</li>
    <li v-if="todos.length">
      <input type="checkbox" @click="checkAll" :checked="checked" />
      已办事项{{ doneCount }}/全部事项{{ todos.length }}

      <span class="closecompleted" @click="todos = doneTodos">清空已办</span>
      <span class="close" @click="todos = []">清空全部</span>
    </li>
  </ul>
</template>

<script setup>
import { ref, computed } from 'vue'

const todos = ref([])
let newTodo = ref('')
// 添加待办事项
function addTodo() {
  if (newTodo) {
    todos.value.push({
      text: newTodo,
      done: false,
    })
    newTodo = ''
  } else {
    alert('请输入待办事项')
  }
}
const checked = ref(false)
// 计算已办事项的数量
const doneCount = computed(() => {
  let count = todos.value.filter((todo) => todo.done).length
  if (count === todos.value.length) {
    checked.value = true
  } else {
    checked.value = false
  }
  return count
})

// 筛选未办事项的数组
const doneTodos = computed(() => {
  return todos.value.filter((todo) => !todo.done)
})

// 全选
function checkAll() {
  todos.value.forEach((todo) => {
    todo.done = !todo.done
  })
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.myhead {
  background-color: #0b87ff;
  text-align: center;
  padding: 5px 0px 10px 0px;
  color: aliceblue;
}

.myhead .box {
  margin-top: 10px;
  display: flex;
  gap: 5px;
  justify-content: center;
}

.thing {
  width: 300px;
  height: 30px;
  padding: 0 10px;
  border-radius: 3px;
  outline: none;
  border: solid 1px white;
}

.add {
  display: inline-block;
  width: 80px;
  height: 30px;
  background-color: #eee;
  color: #0b87ff;
  line-height: 30px;
  border: none;
  border-radius: 3px;
}

.add:hover {
  cursor: pointer;
  background-color: #fff;
  color: #ff6700;
}

ul li {
  list-style: none;
  position: relative;
  padding-left: 40px;
  height: 40px;
  line-height: 40px;
}
/* 将所有奇数列表项设置为不同的颜色（斑马线）*/
ul li:nth-child(odd) {
  background-color: #f9f9f9;
}

/* 光标移入的时候背景变暗 */
ul li:hover {
  cursor: pointer;
  background-color: #dddddd;
}

/* 单击时，添加背景色并删除文本 */
ul li.check {
  background-color: #888888;
  text-decoration: line-through;
  color: #ff6700;
}

/* 设置关闭按钮的样式 */
.close {
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 0px 20px;
  font-size: 16px;
}
.close:hover {
  background-color: #f44336;
  color: white;
}
.closecompleted {
  position: absolute;
  right: 110px;
  top: 0px;
  padding: 0px 20px;
  font-size: 16px;
}
.closecompleted:hover {
  background-color: #f44336;
  color: white;
}
.empty {
  text-align: center;
  font-size: 25px;
}
</style>
